<template>
    <!-- 左侧菜单 -->
    <div class="cat-nav-box">
        <ul class="cat-nav-bd">
            <router-link class="cat-nav-item" :to="'/category/' + item.id" v-for="item in navList" :key="item.id" tag="li">
                <span class="nav-text">{{item.name}}</span>
            </router-link>
        </ul>
    </div>
</template>

<script>

export default {
    name: 'CatNav',
    props: ['navList']
}
	
</script>

<style lang="less" scoped>
// 左侧菜单
.cat-nav-box{
    overflow: hidden;
    flex: 0 0 1.8rem;
    font-size: .26rem;
    overflow-y: auto;
    min-height: 100%;
    .cat-nav-item{
        display: table;
        width: 100%;
        height: .8rem;
        line-height: .8rem;
        &.active{
            color: #f23030;
            background-color: #ffffff;
        }
        .nav-text{
            display: table-cell;
            text-align: center;
            vertical-align: center;
        }
    }
}
	
</style>